<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：我的地址页面
 *		作   者：Frank
 *		创建日期：2023/08/28
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/28			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main" :style="'height:'+ clientHeight + 'px; '">
		<template v-if="userStore.address.list.length > 0">		
			<view class="main-item" v-for="(item, index) in userStore.address.list"
				:key="index"
				@tap="onSelAddr(index)">
				<view class="main-item-up">
					<text class="main-item-up-name">{{item.name}}</text>
					<text class="main-item-up-tel">{{item.tel}}</text>
					<view class="main-item-up-default" v-if="index == userStore.address.defaultIdx">默认</view>
					<text class=" main-item-up-edit iconfont icon-bianji" @tap="onModifyAddr(index)"></text>
				</view>
				<view class="main-item-down">
					<view class="main-item-down-area">{{item.area}} &nbsp; {{item.detailAddr}}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="main-empty"> 还没添加收货地址！</view>
		</template>
	</view>
	<view class="foot">
		<view class="foot-add" @tap="onAddAddr">+添加收货地址</view>
	</view>
</template>

<script>
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'	
	export default {
		data() {
			return {
				clientHeight:0,
				isSelPath:false
				// address:{
				// 	defaultIdx:0,
				// 	list:[
				// 		 {name:'胖哥哥', area:'四川省/成都市/双流区/', detailAddr:'警校路三江悦府警校路三江悦府警校路三江悦府警校路三江悦府', tel:'15013569955'},
				// 		 {name:'胖手哥哥', area:'四川省/成都市/温江区/', detailAddr:'富合苑', tel:'15013569955'}
				// 	]
				// }
			}
		},
		computed:{
			...mapStores(userStore)
			// ...mapState(userStore, {
			// 	// address:'user.user_data.address'
			// 	address:(state) => state.user.user_data.address
			// })
		},
		methods: {
			onSelAddr(index){
				if(this.isSelPath){
					uni.$emit('EVENTS_SEL_PATH', index);
					uni.navigateBack();
				} else{
					this.onModifyAddr(index);
				}
			},
			onModifyAddr(index){
				uni.navigateTo({
					url:'/pages/add-path/add-path?index=' + index
				});
			},
			onAddAddr(){
				uni.navigateTo({
					url:'/pages/add-path/add-path'
				});
			}
			
		},
		onLoad(e) {
			if(e.isSelPath){
				this.isSelPath = true;
			}
		},
		onReady(){
			uni.getSystemInfo({
				success: (res) => {
						this.clientHeight = res.windowHeight - uni.upx2px(148);
					}
			});
		}
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		background-color: #f6f6f6;
		padding: 0 16rpx;
	}
	.main-item{
		background-color: white;	
		height: 200rpx;
		border-radius: 30rpx;
		margin: 16rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.main-item-up{
		flex:1;
		padding-top: 20rpx;
		position: relative;
		left:0;
		top:0;
	}
	.main-item-up-name{
		color: black;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 16rpx;
	}
	.main-item-up-tel{
		color: black;
		font-size: 32rpx;
		padding: 0 32rpx 0 16rpx;
	}
	.main-item-up-default{
		display: inline-block;
		width: 100rpx;
		height: 50rpx;
		text-align: center;
		color: #ABA6FB;
		border: 3rpx solid #ABA6FB;
		border-radius: 5rpx;
	}
	.main-item-up-edit{
		text-align: right;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 54rpx;
	}
	.main-item-down{
		flex:1;
		color: black;
		font-size: 32rpx;
		padding: 0 16rpx;		
	}
	.foot{
		width: 100vw;
		height: 132rpx;
		background-color: white;
		padding: 16rpx 16rpx;
	}
	.foot-add{
		height: 100rpx;
		background-color: #ABA6FB;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.main-empty{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
